<template>
  <div id="Setting">
    <Row type="flex">
      <i-col :span="spanLeft" class="left">
        <Menu
          active-name="1"
          align="center"
          class="post-type"
          @on-select="switchTab"
        >
          <Menu-group title="个人中心">
            <Menu-item
              v-for="item in personCenter"
              :name="item.value"
              :key="item.key"
            >
              <Icon :type="item.icon" />
              {{ item.key }}
            </Menu-item>
          </Menu-group>
        </Menu>
      </i-col>
      <br />
      <i-col :span="spanRight" class="right">
        <div class="content">
          <router-view :userInfo="userInfo" />
        </div>
      </i-col>
    </Row>
  </div>
</template>

<script>
import { getPersonInfo } from "@/utils/api";

export default {
  name: "Setting",
  data() {
    return {
      spanLeft: 6,
      spanRight: 16,
      personCenter: [
        { key: "个人信息", value: "person-info", icon: "md-person" },
        { key: "账号安全", value: "account-security", icon: "md-card" },
        { key: "我的帖子", value: "my-post", icon: "ios-book" },
        { key: "我的视频", value: "my-video", icon: "logo-youtube" },
        { key: "历史记录", value: "my-history", icon: "ios-clock" },
      ],
      userInfo: {},
      toWhere: "", //默认子路由地址
    };
  },
  methods: {
    switchTab(path) {
      this.$router.push({
        path: "/bingo/User_home/setting/" + path,
      });
    },
  },
  created() {
    this.$router.push({
      path: "/bingo/User_home/setting/person-info",
    });
    getPersonInfo().then((res) => {
      this.userInfo = res.data.resultMap;
    });
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      // 通过 `vm` 访问组件实例
      // 将访问此页面的下一个路由地址保存在this.toWhere
      vm.toWhere = to.fullPath;
      if (to.fullPath == "/bingo/User_home/setting") {
        vm.$router.push({ path: "/bingo/User_home/setting/person-info" });
      } else {
        vm.$router.push({ path: to.fullPath });
      }
    });
  },
};
</script>

<style scoped>
label {
  width: 15%;
  display: inline-block;
  margin-left: 25px;
}
</style>
